<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot-超级文件带师</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
</head>
<style>
    .el-header, .el-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;

        color: white;
        text-align: center;
        border: 1px solid #ebeef5;

        background-color: #409EFF;
    }
    .el-header{
        height: auto !important;
    }
    .el-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .xx_grid{
        display: grid;grid-template-columns: repeat(auto-fill,400px);grid-gap: 20px 20px;justify-content: center;margin-top: 20px;
    }
    .box-card{
        line-height: 30px;
    }
    @media screen and (max-width: 750px) {
        .el-dialog {
            width: 98% !important;
        }
        .xx_grid{
            display: grid;grid-template-columns: repeat(auto-fill,100%);grid-gap: 10px 10px;justify-content: center;margin-top: 20px;
        }
    }
    body{
        margin: 0px;
    }
    .select{
        display: flex;flex-direction: column;justify-content: center;
        margin: 10px;
    }
    .select div{
        margin: 10px;
    }
</style>
<body>
<div id="content" style="display: flex;flex-direction: column;min-height: 100vh;">
    <el-container >
        <el-header><h1>万能题库</h1></el-header>

        <el-main style=" justify-content:flex-start;">
            <el-card shadow="hover" v-for="(item,i) in tableData" style="text-align: left;">
                <p style="    font-size: 20px;text-align: justify;line-height: 40px;">{{item.question}}</p>
                <div class="select">
                    <div :style="{ color: item.a_red}">{{item.a}}</div>
                    <div :style="{ color: item.b_red}">{{item.b}}</div>
                    <div :style="{ color: item.c_red}">{{item.c}}</div>
                    <div :style="{ color: item.d_red}">{{item.d}}</div>
                </div>
            </el-card>
        </el-main>
        <el-footer>SpringBoot-SuperDir - power by xiaoxi</el-footer>
    </el-container>
</div>

<script>
    var app = new Vue({
        el: '#content',
        data: {
            tableData:[]
        },
        mounted:function(){
            this.getQuestionList();

        },
        methods: {
            getNum: function (str,firstStr,secondStr){
                if(str == "" || str == null || str == undefined){ // "",null,undefined
                    return "";
                }
                if(str.indexOf(firstStr)<0){
                    return "";
                }
                var subFirstStr=str.substring(str.lastIndexOf(firstStr)+firstStr.length,str.length);
                var subSecondStr=subFirstStr.substring(0,subFirstStr.lastIndexOf(secondStr));
                return subSecondStr;
            },
            getQuestionList: function () {
                axios.get('Q_getQuestionList', {
                    params: {}
                })
                    .then(res => {
                        console.log('数据是:', res);
                        for (let item of res.data.data) {
                            let ans = this.getNum(item.question,"（","）");
                            if(ans=="" || ans == undefined){
                                ans = this.getNum(item.question,"(",")");
                            }
                            item.ans=ans;
                            ans=ans.replace(/\s/g,"");
                            switch (ans) {
                                case 'A':item.a_red='red'
                                    break;
                                case 'B':item.b_red='red'
                                    break;
                                case 'C':item.c_red='red'
                                    break;
                                case 'D':item.d_red='red'
                                    break;
                                default:break;
                            }
                        }
                        app.tableData = res.data.data;
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            }
        }
    })
</script>

</body>
</html>